<form action="" method="post" id="listing_content_form" class="mainForm">


<?php $body_content = " "; ?>

<input type="hidden" value="<?php echo $listing->getId() ?>" name="template_id">
<div class="widget" id="template_content_div">
	<div class="head"><h5 class="iList">Listing Selection for: <?php echo $listing->getName() ?></h5></div>
	

			
	<?php foreach ($selection_components as $selection_component){
	
			$level = $selection_component[0];
			
			$variables = $selection_component[1];	
	?>
			   <div style="border: 1px solid #CCCCCC; float: left; margin: 10px;  padding: 10px; width: 260px;">
			   	<div style=" border-bottom: 1px solid #CCCCCC; font-weight: bold; margin-bottom: 10px;">
			   	<?php 
			   		$category_name = explode(".", $selection_component[1][0]);
			   		
			   		echo $category_name[0];
			   	
			   	?>
			   	
			   	 </div>
						<div style="float:left; width:80px;"  class="search_div">
							<?php echo $level->getName().": ";?>
						</div>
						<?php 
						$the_table = Doctrine_Core::getTable ( 'Level' );
						$the_table->setTreePath();
						$the_table->findTreePath($level);
						$tree_path = $the_table->getTreePath();
						$category_content = Doctrine_Core::getTable('CategoryContent');
						$category_content->setContentArr();
						$contents = Doctrine_Core::getTable('CategoryContent')->getContentsByTreePath($tree_path, $level->getCategoryId());
						
						//$to_refresh = count($variables) > 2 ?  $variables[2] : ""; 
						?>
						<div style="float:left"  class="search_div" >
						
						
				
						<select style="width:130px;" id="<?php echo str_replace(" ", "_", str_replace(".", "_", $variables[0])) ;?>" name="<?php echo str_replace(" ", "_", $variables[0]);?>" onchange="getChildrendata('<?php echo  str_replace(" ", "_", str_replace(".", "_", $variables[1]))?>', $(this).attr('value'))" class="ignore">				
				
						<option value="">--Select--</option>	
							<?php 
								foreach ($contents as $content) {
								?>
								<option value="<?php echo $content->getId();?>"><?php echo $content->getName();?></option>
								<?php 
								}
							?>
						</select>
						</div>
					
					
					
						<?php for ($i = 1; $i < count($variables); $i++) {
								//$onchange_param = $i + 2 < count($variables)-1 ?  $variables[$i+2] : "";
								$onchange_str = $i + 1 < count($variables)? "getChildrendata('". str_replace(" ", "_", str_replace(".", "_", $variables[$i+1])) ."', $(this).attr('value'))" : "";
								
							?>
							<div style="clear:both">
								<div style="float:left;width:80px;"  class="search_div">
									<?php 
									$pieces = explode('.', $variables[$i]);
									echo $pieces[count($pieces) - 1].": ";
									?>
								</div>
								<div style="float:left"  id="<?php echo str_replace(" ", "_", str_replace(".", "_", $variables[$i]));?>_div"  class="search_div">
									<select style="width:130px;" id="<?php echo str_replace(" ", "_", str_replace(".", "_", $variables[$i]));?>" name="<?php echo str_replace(" ", "_", $variables[$i]);?>" onchange="<?php echo $onchange_str?>" class="ignore">
											<option value="">--Select--</option>
									</select>
								</div>
							</div>
							
							<?php 
						}?>
					
				</div>	
	
	<?php }?>   
	
	<div style="clear: both; margin-bottom: 10px"></div>
</div>
	<div style="float:right; margin-top:20px;">
		<input type="button" id="save" value="Save" class="greyishBtn submitForm" >
	</div>
	<div style="float:right; margin-top:20px;">
		<?php // if($deletable == true){?>
		 <!-- 	<input type="button" id="delete" value="Delete" class="redBtn submitForm"> -->
		<?php // }?>
	</div>	
	<div style="clear: both;"></div>
	
	<div id="refresh_script">

	</div>
</form>



<script type="text/javascript">


$("#save").click(function (event){
    submitForm();
})

$("form#listing_content_form").submit(function (event){
    event.preventDefault();
    submitForm();
})

function submitForm(){
    var str=$('form#listing_content_form').serialize();

    $.ajax({type: 'POST', url:" <?php echo url_for('listing_selection/saveListingSelection?listing_id=' . $listing->getId()) ?> " , script:true, cache:false, data:  str, 
    beforeSend: function(){
			if (!validate_selection()){
				$("#error_msg").show();
				$("#msg_text").html("Please select all levels");
				 return false;
			}
         },

    success: function(data) {
        $('#category_container_div').html(data);
    } });
}



function validate_selection(){
	var all_selected = true;
    $("select").each(function()
    		{
				var selected_value = $(this).attr("value");
				
				if (selected_value == ""){
					var name = $(this).attr("id");
					var name_arr = name.split(".");
					var end_str = name_arr[0];
					var start_str = name_arr[name_arr.length - 1];
					var start_str_arr = start_str.split("_");
					var select_str = "";
					for (var i = 0; i < start_str_arr.length; i++){
						select_str = select_str + " " + start_str_arr[i];
					}
					
	
					all_selected = false;
					return false;
    			}
    		    // add $(this).val() to your array
    			//parent_arr.push($(this).parent().attr("id"));
				
    		});
	
	return all_selected;
}



function getChildrendata(childCombo, categoryContentId){
     //alert(categoryContentId); return false;
	   var str="id=" + categoryContentId + "&name=" + childCombo;
	   var refresh =  "refresh_script";
	    $.ajax({type: 'POST', url:' <?php echo url_for('listing_selection/loadCategoryChildren')?>',  script:true, cache:false, data:  str,

  	beforeSend: function(){
          if (categoryContentId == ""){
	              var elem = document.getElementById(childCombo);
	              elem.options.length = 0; 
	              elem.options[0] = new Option('--Select--', '');
	              return false;
	        }

     },
			
      success: function(data) {
          var div_to_refresh = document.getElementById(refresh);
           $(div_to_refresh).html(data);
         	 
       } });
     
 }


$('form').jqTransform({imgPath:'../images/forms'});



</script>

<style>
.search_div{
	padding: 5px;
	
}

.error_msg{
 	background: none repeat scroll 0 0 rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 4px 4px 4px 4px;
    color: rgba(255, 0, 0, 0.7);
    font-weight: bold;
    margin-top: 10px;
    padding: 2px 2px 2px 10px;
	
}
</style>